﻿{% extends 'base/front_base.html' %}
{% load news_filters %}
{% block title %}
	小饭桌
{% endblock %}

{% block head %}
	<link rel="stylesheet" href="{% static 'css/news/index.min.css' %}">
	<script src="{% static 'arttemplate/template-web.js' %}"></script>
	<script src="{% static 'js/index.min.js' %}"></script>
	<script id="news-item" type="text/html">
		{% verbatim %}
		{{ each news_per_page news index }}
		<li>
			<div class="thumbnail-group">
				<a href="/news/{{ news.id }}/">
					<img src="{{ news.thumbnail }}" alt="Alternate Text" />
				</a>
			</div>
			<div class="news-group">
				<p class="title"><a href="/news/{{ news.id }}/">{{ news.title }}</a></p>
				<p class="desc">{{ news.desc }}</p>
				<p class="more">
					<span class="keywords">{{ news.category.name }}</span>
					<span class="pub-time">{{ news.pub_time|timeSince }}</span>
					<span class="author">{{ news.author.username }}</span>
				</p>
			</div>
		</li>
		{{ /each }}
		{% endverbatim %}
	</script>
{% endblock %}

{% block main %}
	<div class="main">
		<div class="wrapper">
			<div class="main-content-wrapper">
				<div class="banner-group" id="banner-group">
					<ul class="banner-ul" id="banner-ul">
						{% for banner in banners %}
							<li>
								<a href="{{ banner.link_to }}">
									<img src="{{ banner.image_url }}" alt="Alternate Text" />
								</a>
							</li>
						{% endfor %}
					</ul>
					<span class="arrow left-arrow">‹</span>
					<span class="arrow right-arrow">›</span>
					<div class="page-control-group">
						<ul class="page-control"></ul>
					</div>
				</div>
				<div class="list-outer-group">
					<ul class="list-tab">
						<li data-category="0" class="active"><a href="javascript:void(0);">最新资讯</a></li>
						{% for category in categories %}
							<li data-category="{{ category.pk }}">
								<a href="javascript:void(0);">{{ category.name }}</a>
							</li>
						{% endfor %}
					</ul>
					<ul class="list-inner-group">
						{% for news in all_news %}
						<li>
							<div class="thumbnail-group">
								<a href="{% url 'news:news_detail' news_id=news.pk %}">
									<img src="{{ news.thumbnail }}" alt="Alternate Text" />
								</a>
							</div>
							<div class="news-group">
								<p class="title"><a href="{% url 'news:news_detail' news_id=news.pk %}">{{ news.title }}</a></p>
								<p class="desc">{{ news.desc }}</p>
								<p class="more">
									<span class="keywords">{{ news.category.name }}</span>
									<span class="pub-time">{{ news.pub_time|time_since }}</span>
									<span class="author">{{ news.author.username }}</span>
								</p>
							</div>
						</li>
						{% endfor%}
					</ul>
					<div class="load-more-group">
						<button class="load-more" id="load-more-btn">查看更多</button>
					</div>
				</div>
			</div>
			{% include 'common/sidebar.html' %}
		</div>
	</div>
{% endblock %}